<!--
  author: tangcheng_cd
  create by: 2018/6/7
  descr: 新增修改面板
-->
<template>
  <div>
    <el-dialog
      :title="dialogMode === 'ADD' ? '新增' : '编辑'"
      :visible.sync="dialogVisiable"
      v-model="dialogMode"
      @close="ardCancelBtnClick"
      class="meta-tblrel-add-modify-dialog"
      width="822px">
      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        :label-position="'right'">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="表1元数据代码" prop="t1_meta_id">
              <el-input v-model="formData.t1_meta_id"
                        :disabled = "dialogMode === 'MODIFY'"
                        readonly
                        placeholder="请在此输入">
                <el-button slot="append"
                           :disabled = "dialogMode === 'MODIFY'"
                           @click="selectTableBtnClicked('t1_meta_id')">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表2元数据代码" prop="t2_meta_id">
              <el-input v-model="formData.t2_meta_id"
                        :disabled = "dialogMode === 'MODIFY'"
                        readonly
                        placeholder="请在此输入">
                <el-button slot="append"
                           :disabled = "dialogMode === 'MODIFY'"
                           @click="selectTableBtnClicked('t2_meta_id')">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row :gutter="24">
          <el-col :span="12">
            &lt;!&ndash;<el-form-item label="关联关系串" prop="rel_str">&ndash;&gt;
              &lt;!&ndash;<el-input v-model="formData.rel_str"&ndash;&gt;
                        &lt;!&ndash;placeholder="请在此输入">&ndash;&gt;
              &lt;!&ndash;</el-input>&ndash;&gt;
            &lt;!&ndash;</el-form-item>&ndash;&gt;
          </el-col>
          <el-col :span="12">
            &lt;!&ndash; 提交的时候拆出开始时间beginDt和结束时间endDt &ndash;&gt;
            <el-form-item label="有效日期" prop="availDate">
              <el-date-picker v-model="formData.availDate"
                              type="daterange"
                              align="right"
                              unlink-panels
                              format="yyyy-MM-dd"
                              value-format="yyyyMMdd"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="formData.busi_desc"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="formData.tech_desc"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="关联关系串" prop="rel_str">
            <meta-tbl-column-simple-condition ref="simpleCondition"
                                              :t1_meta_id="formData.t1_meta_id"
                                              :t2_meta_id="formData.t2_meta_id"
                                              v-model="formData.rel_str">
            </meta-tbl-column-simple-condition>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')" class="dialog-btn">重置</el-button>
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
    </el-dialog>
    <select-meta-table-dialog ref="selectMetaTableDialog"></select-meta-table-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import selectMetaTableDialog from '../metaDatapkgTableManager/selectMetaTableDialog'
  import metaTblColumnSimpleCondition from './metaTblColumnSimpleCondition'

  export default {
    components: {
      metaTblColumnSimpleCondition,
      selectMetaTableDialog
    },
    name: 'mdp-add-modify-panel',
    data () {
      return {
        dialogVisiable: false, // 新增对话框显示控制
        dialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
          type: String,
          default: 'ADD'
        }, // 对话框模式
        currentItem: {
          t1_meta_id: null,
          t2_meta_id: null,
          rel_str: null,
          // availDate: null,
          busi_desc: null,
          tech_desc: null
        }, // 表单初始化数据
        formData: {}, // 新增对话框表单数据
        formRules: {
          t1_meta_id: [
            { required: true, message: '此项为必输项', trigger: 'blur' },
            { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
          ],
          t2_meta_id: [
            { required: true, message: '此项为必输项', trigger: 'blur' },
            { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
          ],
          rel_str: [
            { required: true, message: '此项为必输项', trigger: 'blur' },
            { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
          ],
          busi_desc: [
            { required: true, message: '此项为必输项', trigger: 'blur' },
            { min: 1, max: 160, message: '长度在 1 到 160 个字符', trigger: 'blur' }
          ],
          tech_desc: [
            { required: true, message: '此项为必输项', trigger: 'blur' },
            { min: 1, max: 160, message: '长度在 1 到 160 个字符', trigger: 'blur' }
          ]
          // ,availDate: [ // 有效日期
          //   { required: true, message: '此项为必输项', trigger: 'blur' }
          // ]
        } // 新增对话框表单项规则
      }
    },
    methods: {
      // 新增显示对话框
      addShow () {
        // 显示新增对话框
        this.dialogVisiable = true
        // 新增对话框模式
        this.dialogMode = 'ADD'
        // 表单数据初始化
        this.currentItem = {
          t1_meta_id: null,
          t2_meta_id: null,
          rel_str: null,
          // availDate: null,
          busi_desc: null,
          tech_desc: null
        }
        this.formData = {...this.currentItem}

        if (this.$refs.simpleCondition) {
          this.$refs.simpleCondition.analyseValue()
        }
      },
      // 编辑显示对话框
      editShow (selNode) {
        // 显示编辑对话框
        this.dialogVisiable = true
        // 新增对话框模式
        this.dialogMode = 'MODIFY'

        // 表单数据初始化
        this.currentItem = selNode
        this.formData = {
          // availDate: [formData['te_date'], formData['le_date']],
          ...this.currentItem
        }

        if (this.$refs.simpleCondition) {
          // 第一次进来，form还没有创建，里面的simpleCondition还没创建
          // 这个时候就用simpleCondition的created钩子函数去analyseValue
          // 如果初始化了一次后再次显示的时候通过引用去analyseValue
          // 这里console.info先不删掉，今后可能还会调整
          // console.info('现在有这个引用了')
          // what? 这里有rel_str,那个simpleCondition组件里面value为空？
          // console.info(formData.rel_str)
          setTimeout(() => {
            this.$refs.simpleCondition.setOptions1Data(this.formData.t1_meta_id)
            this.$refs.simpleCondition.setOptions2Data(this.formData.t2_meta_id)
            this.$refs.simpleCondition.analyseValue()
          }, 50)
        }
      },
      // 取消操作
      ardCancelBtnClick () {
        this.dialogVisiable = false
        // 清空数据
        this.formData.t1_meta_id = null
        this.formData.t2_meta_id = null
        this.formData.rel_str = null
        this.formData.busi_desc = null
        this.formData.tech_desc = null
        // 清除验证
        this.$refs.form.clearValidate()
      },
      // 重置表单
      resetForm (formName) {
        this.formData = {...this.currentItem}
        // 清除验证
        this.$refs.form.clearValidate()
        // 重新解析
        setTimeout(() => {
          this.$refs.simpleCondition.setOptions1Data(this.formData.t1_meta_id)
          this.$refs.simpleCondition.setOptions2Data(this.formData.t2_meta_id)
          this.$refs.simpleCondition.analyseValue()
        }, 50)
      },
      // 预处理表单数据
      preHandFormData (formData) {
        // let availDate = formData['availDate']

        return {
          // te_date: availDate[0],
          // le_date: availDate[1],
          ...formData
        }
      },
      // 提交新增数据
      submitFormData () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let postData = this.preHandFormData(this.formData)
            let callback = () => {
              // 隐藏新增对话框
              this.dialogVisiable = false
              // 数据清空
              setTimeout(() => {
                this.resetForm('form')
              }, 200)
              this.$emit('submitAfter', this)
            }
            if (this.dialogMode === 'ADD') {
              // 新增
              ajax.post(api.INSERT_META_TBLREL, postData).then(res => {
                callback && callback()
              })
            } else {
              // 修改
              ajax.post(api.UPDATE_META_TBLREL, postData).then(res => {
                callback && callback()
              })
            }
          } else {
            return false
          }
        })
      },
      // 选择表按钮点击
      selectTableBtnClicked (curDataNodeKey) {
        let _this = this
        let selectedTableHandler = node => {
          if (node) {
            _this.formData[curDataNodeKey] = node.meta_id
            if (curDataNodeKey === 't1_meta_id') {
              _this.$refs.simpleCondition.setOptions1Data(node.meta_id)
            } else if (curDataNodeKey === 't2_meta_id') {
              _this.$refs.simpleCondition.setOptions2Data(node.meta_id)
            }
            return true
          } else {
            this.$message.error('请选择一条记录')
          }
          return false
        }
        this.$refs.selectMetaTableDialog.show(selectedTableHandler)
      }
    },
    created () {
      // 默认表单数据初始化
      this.formData = JSON.parse(JSON.stringify(this.currentItem))
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .meta-tblrel-add-modify-dialog
    .el-dialog
      width 900px
      .el-dialog__body
        padding 0px 38px
        .el-form
          .iconfont.icon-add
            font-size 14px
          .el-date-editor
            width 260px !important
          .el-input
            width 100%
            .el-input__inner
              height 40px
          .el-date-editor
            height 40px
            width 100% !important
            .el-range-separator
              height 25px
</style>
